<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>音乐喷泉系统</title>
  <jsp:include page="../commonCss.jsp" />
</head>
<body>
  <div class="layui-layout layui-layout-admin">
     <div class="layui-header">
       <div class="layui-logo layui-hide-xs">
          <img src="${pageContext.request.contextPath}/resources/img/logo.png" title="logo"
                        width="35" height="35"/>
                        </div>
     <ul class="layui-nav layui-layout-left">
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>
      <li class="layui-nav-item layui-hide-xs"><a href="">首页</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">歌单</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">歌手</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">我的音乐</a></li>
      <button id="btn" class="btn" style="float:right;width:50px;background-color: #fff;height:25px;margin-top:18px;margin-left:5px;border-radius:3px;border-color:#fff;">搜索</button> 
      <input type="text" id="title" style="width:200px;float:right;height:25px;margin-top:18px;margin-left:250px;" placeholder="搜索音乐" autocomplete="off" class="layui-input">
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block" id="exitlogin">
        <a href="javascript:;">
          <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
          <span><%=request.getSession().getAttribute("username")%></span>
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">个人中心</a></dd>
          <dd><a href="">留言</a></dd>
          <dd><a href="">退出登录</a></dd>
        </dl>
      </li>
      <div id="login" class="layui-show-md-inline-block">
	      <li class="layui-nav-item layui-hide-xs"><a href="">登录</a></li>
	      <li class="layui-nav-item layui-hide-xs"><a href="">注册</a></li>
      </div>
    </ul>
     </div>
     <div class="layui-body" style="left:0px;">
          <div class="layui-carousel" id="test10" style="position: absolute;top: 0;left: 50%;transform: translateX( -50% );text-align:center;">
			  <div carousel-item="">
			    <div><img src="${pageContext.request.contextPath}/resources/img/lun_bo_1.jpg" width="260px" height="auto"></div>
			    <div><img src="${pageContext.request.contextPath}/resources/img/lun_bo_2.jpg" width="260px" height="auto"></div>
			  </div>
		  </div>
     </div>
     <div class="layui-footer" style="left:0px;">
       <!-- 底部固定区域 -->
       
     </div>
  </div>
</body>
<!-- 引入 layui.js -->
<script src="https://layui.11dz.cn/layui-v2.6.8/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/resources/js/jquery-3.6.0.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/js/jquery-cookie.js"></script>
<script>
layui.use('layer', function(){
    var layer = layui.layer;
    if(<%=request.getSession().getAttribute("username")%> !=null){
    	    document.getElementById("exitlogin").style.visibility="none";
    	    document.getElementById("login").style.visibility="hidden";
       }else{
    	    document.getElementById("exitlogin").style.visibility="hidden";
    	    document.getElementById("login").style.visibility="none";
    	    alert("请登录");
       }
  });
layui.use(['carousel', 'form'], function(){
	  var carousel = layui.carousel
	  ,form = layui.form;
	  
	//图片轮播
      carousel.render({
        elem: '#test10'
        ,width: '100%'
        ,height: '260px'
        ,interval: 5000
      });
	  
	  //事件
	  carousel.on('change(test4)', function(res){
	    console.log(res)
	  });
	  
	  var $ = layui.$, active = {
	    set: function(othis){
	      var THIS = 'layui-bg-normal'
	      ,key = othis.data('key')
	      ,options = {};
	      
	      othis.css('background-color', '#5FB878').siblings().removeAttr('style'); 
	      options[key] = othis.data('value');
	      ins3.reload(options);
	    }
	  };
	  
	  //监听开关
	  form.on('switch(autoplay)', function(){
	    ins3.reload({
	      autoplay: this.checked
	    });
	  });
	  
	  $('.demoSet').on('keyup', function(){
	    var value = this.value
	    ,options = {};
	    if(!/^\d+$/.test(value)) return;
	    
	    options[this.name] = value;
	    ins3.reload(options);
	  });
	  
	  //其它示例
	  $('.demoTest .layui-btn').on('click', function(){
	    var othis = $(this), type = othis.data('type');
	    active[type] ? active[type].call(this, othis) : '';
	  });
	});
</script>
</html>